<script setup>
import {ref, watch} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";

 const formData=ref({})
 //品牌集合
 const brandOptions=ref([])
 //单位集合
 const unitOptions=ref([])
 const dialogVisible=ref(false);
 const props = defineProps({
   visible:{
     type:Boolean,
     default:false,
     required:false
   }
 })
const emits=defineEmits("")
 watch(()=>props.visible,(newVal)=>{
   dialogVisible.value=newVal;
 })
const handleClose =()=>{
   formData.value={}
   imageUrl.value=''
  if (uploadRef.value){
    uploadRef.value.clearFiles();
  }
  dialogVisible.value=false
  emits("dialogVisible",dialogVisible.value)
}
const uploadRef=ref()
const imageUrl = ref('')
const handleAvatarSuccess = (resp)=>{
  imageUrl.value=resp;
  formData.value.image=resp
  ElMessage.success("上传成功")
}
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type!=='image/webp') {
    ElMessage.error('您上传的头像必须是jpg或者png格式')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('您上传的图片大小必须2M以内')
    return false
  }
  return true
}
const handleConfirm=()=>{
  axios.post("/carcenter-service-order/product/saveProduct",formData.value).then(resp=>{
    ElMessage.success(resp.data.message)
    dialogVisible.value=false
  })
}
</script>

<template>
  <el-dialog
      title="商品信息"
      v-model="dialogVisible"
      width="600px"
      :close-on-click-modal="false"
      :before-close="handleClose"
  >
    <!-- 基本信息部分 -->
    <div class="section">
      <h4 class="section-title">商品基本信息</h4>
      <el-form :model="formData" label-width="80px" class="form">
        <el-form-item label="商品名称">
          <el-input v-model="formData.productName" placeholder="请输入商品名称" />
        </el-form-item>

        <el-form-item label="选择品牌">
          <el-select v-model="formData.brand" placeholder="请选择品牌">
            <el-option
                v-for="item in brandOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="选择单位">
          <el-select v-model="formData.unit" placeholder="请选择单位">
            <el-option
                v-for="item in unitOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <!-- 分割线 -->
    <el-divider />

    <!-- 规格信息部分 -->
    <div class="section">
      <h4 class="section-title">规格信息</h4>

      <el-form :model="formData" label-width="100px" class="form">
        <el-form-item label="规格设置选择">
          <el-select v-model="formData.specSetting" placeholder="请选择规格设置">
            <el-option
                v-for="item in specOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <!-- 规格信息展示 -->
      <div class="specs-table">
        <el-row :gutter="10" class="specs-header">
          <el-col :span="6">标准价</el-col>
          <el-col :span="6">零售价</el-col>
          <el-col :span="6">成本价</el-col>
          <el-col :span="6">库存</el-col>
        </el-row>
        <el-row :gutter="10" class="specs-content">
          <el-col :span="6">
            <el-input v-model="formData.standardPrice" placeholder="标准价" />
          </el-col>
          <el-col :span="6">
            <el-input v-model="formData.retailPrice" placeholder="零售价" />
          </el-col>
          <el-col :span="6">
            <el-input v-model="formData.costPrice" placeholder="成本价" />
          </el-col>
          <el-col :span="6">
            <el-input v-model="formData.stock" placeholder="库存" />
          </el-col>
        </el-row>
      </div>

      <!-- 商品图片 -->
      <div class="image-upload">
        <h4>商品图片</h4>
        <el-form-item label="缩略图" prop="thumbnail">
          <el-upload
              ref="uploadRef"
              class="avatar-uploader"
              action="http://localhost:8080/api/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" alt=""/>
            <el-icon v-else class="avatar-uploader-icon">
              <Plus></Plus>
            </el-icon>
          </el-upload>
        </el-form-item>
      </div>

      <!-- 商品介绍 -->
      <div class="description">
        <h4>商品介绍</h4>
        <el-input
            v-model="formData.description"
            type="textarea"
            :rows="4"
            placeholder="请输入商品介绍"
        />
      </div>
    </div>

    <!-- 底部按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.section {
  padding: 10px 0;
}

.section-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 15px;
}

.form :deep(.el-form-item) {
  margin-bottom: 15px;
}

.specs-table {
  margin: 15px 0;
}

.specs-header {
  background-color: #f5f7fa;
  padding: 10px 0;
  font-weight: bold;
}

.specs-content {
  padding: 10px 0;
}

.image-upload {
  margin: 15px 0;
}

.image-upload h4 {
  font-size: 14px;
  margin-bottom: 10px;
}

.description {
  margin: 15px 0;
}

.description h4 {
  font-size: 14px;
  margin-bottom: 10px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>